<template>
	<view>
		<Navbar :isReturn="true"></Navbar>
		<view class="u-form-box u-m-30 u-p-b-30">
			<view class="u-p-t-30 u-font-bold u-font-34">填写说明：</view>
			<view class="u-m-t-20 u-color-puce">1. 本页填写信息仅用于资金转账。</view>
			<view class="u-m-t-20 u-color-puce">2. 收款人不能是军人、公职人员或本公司和关联公司的法人、股东、高管、董事、监事、缴纳社保的员工</view>
			<view class="u-m-t-20 u-color-puce">3. 收款人必须为64周岁以下的大陆居民。</view>
			<view class="u-m-t-20 u-color-puce" @click="onCallMobile(mobile)">4. 如有问题请联系{{ mobile }}。</view>
		</view>

		<view class="u-font-34 u-font-bold u-m-30">收款信息</view>
		<view class="u-form-box u-m-30">
			<u-form :model="form" label-width="240" ref="uForm">
				<u-form-item required label="账户姓名">
					<u-input placeholder="请输入收款账户真实姓名" input-align="right" :clearable="false"
						v-model="form.bank_name" />
				</u-form-item>
				<u-form-item required label="账户银行及支行">
					<u-input placeholder="请输入收款账户银行及支行" input-align="right" :clearable="false" v-model="form.bank" />
				</u-form-item>
				<u-form-item required label="账户账号">
					<u-input placeholder="请输入收款账户账号" v-model="form.bank_account" type="number" :clearable="false"
						input-align="right" />
				</u-form-item>
				<u-form-item required="true" label="手机号码">
					<view class="u-text-right">
						<view class="u-flex">
							<view class="country_code" @click="codeData.show = true">
								<text class="u-p-r-10">+{{ form.area_code }}</text>
								<u-icon name="arrow-right" size="26" color="#c0c4cc"></u-icon>
							</view>
							<view class="u-flex-1">
								<u-input placeholder="请输入收款账户人手机号" v-model="form.bank_phone" type="number"
									:clearable="false" input-align="right" />
							</view>
						</view>
					</view>
				</u-form-item>
				<u-form-item required label="身份证号" prop="id_card">
					<u-input v-model="form.id_card" placeholder="请输入收款账户人身份证号码" maxlength="18" input-align="right"
						:clearable="false" />
				</u-form-item>
			</u-form>
		</view>

		<view style="height: 300rpx;"></view>
		<Bottom :isTwice="true" :isClick="isClick" :rightText="'提交'" @confirm="onConfirm"></Bottom>
		
		<!-- 确认弹出框 -->
		<Modal :show="modal.show" :confirmText="modal.confirmText" :modalContent="modal.content" :showCancel="modal.showCancel" @confirm="modalConfirm">
		</Modal>
		
		<!-- 区号 -->
		<view v-if="codeData.show">
			<u-select v-model="codeData.show" @confirm="onCodeConfirm" :default-value="[0]" :mask-close-able="false"
				value-name="area_code" :list="codeData.list"></u-select>
		</view>
	</view>
</template>

<script>
	import {
		userInfo,
		getConfigInfo,
		phoneAreaCode
	} from '@/network/api.js'
	import { teaPaymentEdit } from '@/network/tea.js'
	import {
		call, hasEmptyValue
	} from '@/utils/index.js'
	import env from '@/network/env.js'
	import Navbar from '@/components/Navbar.vue'
	import Bottom from '@/components/Bottom.vue'
	import Modal from '@/components/Modal.vue'
	export default {
		components: {
			Navbar,
			Bottom,
			Modal
		},
		data() {
			return {
				form: {
					bank_name: '', // 收款账户姓名
					bank: '', // 收款银行
					bank_account: '', // 收款账号
					bank_phone: '', // 收款手机号
					area_code: '86', // 收款区号
					id_card: '', // 收款身份证号
				},
				rules: {
					id_card: [{
							required: true,
							message: '请输入身份证号',
							trigger: ['blur', 'change']
						},
						{
							validator: (rule, value, callback) => {
								// 身份证正则表达式
								const idCardRegex =
									/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[012]))(([0|1|2]\d)|3[01])\d{3}([0-9]|X|x)$/;
								return idCardRegex.test(value);
							},
							message: '身份证格式不正确',
							trigger: ['blur', 'change']
						}
					]
				},
				mobile: '',
				isClick: true,
				modal: {
					show: false,
					showCancel: true,
					confirmText: '申请',
					content: ''
				},
				codeData:{
					show:false,
					list: []
				}
			}
		},
		onLoad() {
			this.onGetUserInfo()
			this.onGetMobile()
			this.onGetCountryCode()
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			async onGetMobile(){
				const res = await getConfigInfo({key: 'income_person'})
				this.mobile = res.data.value
			},
			async onGetUserInfo(){
				const res = await userInfo({user_id: uni.getStorageSync("user_id")})
				if(res.data.user_init.is_have == 1){
					for (let key in this.form) {
					    if (res.data.user_init.init.hasOwnProperty(key)) {
					        this.form[key] = res.data.user_init.init[key];
					    }
					}
				}
			},
			async onGetCountryCode() {
				const res = await phoneAreaCode()
				res.data.forEach(item => {
					item.label = item.name + '+' + item.area_code
				})
				this.codeData.list = res.data
			},
			onCodeConfirm(val) {
				this.form.area_code = val[0].value
			},
			onUploadImage(val) {
				if ([1, 3].includes(this.type)) {
					const _this = this
					uni.chooseImage({
						sizeType: ['original', 'compressed'],
						sourceType: ['camera', 'album'],
						success: function(res) {
							uni.showLoading({
								title: "上传中"
							})
							const tempFilePath = res.tempFilePaths[0]
							uni.uploadFile({
								url: `${_this.action}`,
								filePath: tempFilePath,
								name: 'file',
								success: (uploadRes) => {
									switch (val) {
										case 1:
											_this.form.idcard_front = JSON.parse(uploadRes.data)
												.data.url
											break;
										case 2:
											_this.form.idcard_back = JSON.parse(uploadRes.data)
												.data.url
											break;
									}
									uni.hideLoading()
								}
							});
						}
					})
				}
			},
			onCallMobile(mobile){
				call(mobile)
			},
			onConfirm() {
				this.$refs.uForm.validate(async valid => {
					if(valid){
						if(hasEmptyValue(this.form)){
							const params = {
								...this.form,
								user_id: uni.getStorageSync("user_id")
							}
							const res = await teaPaymentEdit(params)
							this.modal.content = '提交成功'
							this.modal.confirmText = '确定'
							this.modal.showCancel = false
							this.modal.show = true
							this.isClick = false
						}else{
							uni.showToast({
								title: "必填项不能为空",
								icon: "none"
							})
							this.isClick = true
						}
					}
				})
			},
			modalConfirm(){
				uni.navigateBack({
					delta: 1,
					success() {
						uni.$emit('update')
					}
				})
			}
		}
	}
</script>

<style>
</style>